<script setup lang="ts">

import HeaderLintView from "./HeaderLintView.vue";
import CarouselView from "./CarouselView.vue";
import HotInfomationView from "./HotInfomationView.vue";
import MainIndexRecommendView from "./MainIndexRecommendView.vue";
import MainIndexRankingView from "./MainIndexRankingView.vue";
import MainIndexHeaderListView from "./MainIndexHeaderListView.vue";
</script>

<template>
  <div class="index-page-box">
    <div class="index-page-content">
      <div class="header-class-content">
        <main-index-header-list-view/>
      </div>
      <div class="center-box">
        <div class="center-left">
          <header-lint-view/>
        </div>
        <div class="center-center">
          <hot-infomation-view/>
        </div>
        <div class="center-right">
          <CarouselView/>
        </div>
      </div>

      <div class="index-bottom">
        <div class="bottom-left">
          <main-index-ranking-view/>
        </div>
        <div class="bottom-right">
          <main-index-recommend-view/>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import "style/MainIndex";
</style>